<html lang="zh-cn" xmlns：th="http://www.thymeleaf.org" xmlns:th="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>首页</title>
    <link th:href="@{https://fonts.googleapis.com/css?family=Work+Sans:300,400,700}" rel="stylesheet">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/static/html/css/bootstrap/bootstrap.min.css}">

    <link rel="stylesheet" th:href="@{/static/html/css/bootstrap/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/static/html/css/animate.css}">
    <link rel="stylesheet" th:href="@{/static/html/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/static/html/fonts/ionicons/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/static/html/fonts/flaticon/font/flaticon.css}">
    <link rel="stylesheet" th:href="@{/static/html/fonts/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/static/html/css/bootstrap-datepicker.css}">
    <link rel="stylesheet" th:href="@{/static/html/css/select2.css}">
    <link rel="stylesheet" th:href="@{/static/html/css/helpers.css}">
    <link rel="stylesheet" th:href="@{/static/html/css/style.css}">


</head>

<body>
    <!-- 导航 nav -->
    <nav class="navbar navbar-expand-lg navbar-dark probootstrap_navbar" id="probootstrap-navbar">
        <div class="container">
            <a class="navbar-brand" style="font-size:42px; height: 100px;" href="/">富丽堂皇大宾馆</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#probootstrap-menu" aria-controls="probootstrap-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span><i class="ion-navicon"></i></span>
          </button>
            <div class="collapse navbar-collapse" id="probootstrap-menu" >
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item" th:each="nav:${navList}">
                        <a class="nav-link" style="font-size:20px;"
                           th:href="${nav.url}" th:text="${nav.name}">
                </a></li>

                    <li th:if="${#strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/user/toLogin}">登录/注册</a></li>

                    <li th:if="${not #strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/user/mine}" th:text="${session.loginName}"></a></li>
                    <li th:if="${not #strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/logout}"  th:text="[退出]"></a></li>

                </ul>
            </div>
        </div>
    </nav>
    <!-- 导航 nav End -->


    <section class="probootstrap-cover overflow-hidden relative" th:style="'background-image: url('+@{/static/html/images/bg_1.jpg}+');'" data-stellar-background-ratio="0.5" id="section-home">

        <div class="container">
            <div class="row align-items-center">
                <div class="col-md">
                    <h2 class="heading mb-2 display-4 font-light probootstrap-animate" style="font-size: 86px;">WELCOME TO OUR HOTEL</h2>
                        <p class="lead mb-5 probootstrap-animate">
                        </p>
                        <a th:href="@{/hotel/rooms}" style="font-size: 24px; margin-left:800px" role="button" class="btn btn-primary p-3 mr-3 pl-5 pr-5 text-uppercase d-lg-inline d-md-inline d-sm-block d-block mb-3">住房预约</a>

                </div>


            </div>
        </div>

    </section>
    <!-- END section -->

    <section class="probootstrap-section-half d-md-flex" id="section-about">
        <div class="probootstrap-image probootstrap-animate" data-animate-effect="fadeIn" th:style="'background-image: url('+@{/static/html/images/img_2.jpg}+');'"></div>
        <div class="probootstrap-text">
            <div class="probootstrap-inner probootstrap-animate" data-animate-effect="fadeInRight" th:each="about:${aboutList}">
                <h2 class="heading mb-4">关于我们</h2>
                <p th:text="${about.introduce}">${about.introduce}</p>
                <p th:text="${about.detail}">${about.detail}</p>
                <p><a href="about" class="btn btn-primary" style="width: 80px; height: 40px;padding: 12px 8px; float:right;">了解更多</a></p>
            </div>
        </div>
    </section>


    <section class="probootstrap-section-half d-md-flex" style="height: 486px;">
        <div class="probootstrap-image order-2 probootstrap-animate" data-animate-effect="fadeIn" th:style="'background-image: url('+@{/static/html/images/img_3.jpg}+')'"></div>
        <div class="probootstrap-text order-1">
            <div class="probootstrap-inner probootstrap-animate" data-animate-effect="fadeInLeft">
                <h2 class="heading mb-4">联系我们</h2>
                <p>
                    <div class="col-md-6">
                        <ul class="probootstrap-contact-details">
                            <li>
                                <span class="text-uppercase"><span class="ion-paper-airplane"></span> Email</span>
                                888888888@qq.com
                            </li>
                            <li>
                                <span class="text-uppercase"><span class="ion-ios-telephone"></span> Phone</span>
                                400 800 8888
                            </li>
                        </ul>
                    </div>
                </p>
                <p>
                    <div class="col-md-6">
                        <ul class="probootstrap-contact-details">
                            <li>
                                <span class="text-uppercase"><span class="ion-ios-telephone"></span> Fax</span>
                                400 800 8888
                            </li>
                            <li>
                                <span class="text-uppercase"><span class="ion-location"></span> Address</span>
                                福建省厦门市
                            </li>
                        </ul>
                    </div>
                </p>

            </div>
        </div>
    </section>
    <!-- END section -->

    <!-- 页脚 footer -->
    <footer>
        <div class="container">
            <div class="col-md-12 text-center">
                <p class="probootstrap_font-14" style="color: black;">闽ICP备xxxxxxxx号 联系电话：xxx-xxxxxxxx </p>
                <p class="probootstrap_font-14" style="color: black;">富丽堂皇大酒店 版权所有 COPYRIGHT &copy; 2020. The Grand Hotel All Rights Reserved </p>
            </div>

        </div>
    </footer>
    <!-- 页脚 footer end -->

    <script th:src="@{/static/html/js/jquery.min.js}"></script>

    <script th:src="@{/static/html/js/popper.min.js}"></script>
    <script th:src="@{/static/html/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/html/js/owl.carousel.min.js}"></script>

    <script th:src="@{/static/html/js/bootstrap-datepicker.js}"></script>
    <script th:src="@{/static/html/js/jquery.waypoints.min.js}"></script>
    <script th:src="@{/static/html/js/jquery.easing.1.3.js}"></script>

    <script th:src="@{/static/html/js/select2.min.js}"></script>

    <script th:src="@{/static/html/js/main.js}"></script>

    <script type="text/javascript">
        // 点击sigup触发翻转样式
        $("#signin").click(function() {
                $(".middle").toggleClass("middle-flip");
            }

        );
        // 点击login触发翻转样式
        $("#login").click(function() {
                $(".middle").toggleClass("middle-flip");
            }

        );
    </script>

</body>

</html>